<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fontawesome-free-6.2.0-web/css/all.min.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <!-- 模拟手机顶部状态栏 -->
        <div class="tip">

            <!-- 左侧 -->
            <div class="icon">
                <!-- 信号 -->
                <i class="fa-solid fa-signal"></i>
                <!-- wifi -->
                <i class="fa-solid fa-wifi"></i>
            </div>

            <!-- 中间时间 -->
            <div id="time"></div>

            <!-- 右侧状态 -->
            <div class="state">
                <i class="fa-brands fa-bluetooth-b"></i>
                100%
                <i class="fa-solid fa-battery-full"></i>
            </div>
        </div>

        <!-- 头部搜索栏 -->
        <div class="header">
            <div class="seach">
                <i class="fa-solid fa-magnifying-glass"></i>
                <input type="text" placeholder="搜索内容">
            </div>
        </div>
    </header>

    <!-- 中间内容区 -->
    <main>
        <!-- 菜单栏 -->
        <div class="meau">
            <div class="img"><img src="./img/icons8-food-64 (2).png" alt=""><span>美食</span></div>
            <div class="img"><img src="./img/icons8-food-64 (5).png" alt=""><span>甜点</span></div>
            <div class="img"><img src="./img/icons8-牛奶盒-100.png" alt=""><span>牛奶</span></div>
            <div class="img"><img src="./img/icons8-生菜-64.png" alt=""><span>蔬菜</span></div>
            <div class="img"><img src="./img/icons8-抹茶-100.png" alt=""><span>茶</span></div>
            <div class="img"><img src="./img/icons8-炸鸡-64.png" alt=""><span>快餐</span></div>
            <div class="img"><img src="./img/icons8-椰子鸡尾酒-100.png" alt=""><span>饮料</span></div>
            <div class="img"><img src="./img/icons8-海鲜-100.png" alt=""><span>海鲜</span></div>
        </div>

        <!-- 广告栏 -->
        <div class="cd">
            <img src="./img/cd_03.png" alt="">
        </div>

        <!-- 文字描述 -->
        <div class="text">
            <span>美食</span>
            <span>更多>></span>
        </div>

        <!-- 展示栏 -->
        <div class="display">
            <div class="food">
                <img src="./food/canape-g9cd603101_640.jpg" alt="">
                <p>精致甜点</p>
                <div class="money" id="moneyOne">$234</div>
                <div class="people" id="peopleOne">345人已买</div>
            </div>
            <div class="food">
                <img src="./food/pancakes-gcf3c48fac_640.jpg" alt="">
                <p>酥脆鸡蛋饼</p>
                <div class="money" id="moneyTwo">456</div>
                <div class="people" id="peopleTwo"></div>
            </div>
            <div class="food">
                <img src="./food/pizza-g2486e2e21_640.jpg" alt="">
                <p>水果披萨</p>
                <div class="money" id="moneyThree"></div>
                <div class="people" id="peopleThree"></div>
            </div>
            <div class="food">
                <img src="./food/salad-g1b97f2b6f_640.jpg" alt="">
                <p>美味水果拼盘</p>
                <div class="money" id="moneyFour"></div>
                <div class="people" id="peopleFour"></div>
            </div>
            <div class="food">
                <img src="./food/salmon-gc89dec3ae_640.jpg" alt="">
                <p>高蛋白牛肉</p>
                <div class="money" id="moneyFive"></div>
                <div class="people" id="peopleFive"></div>
            </div>
            <div class="food">
                <img src="./food/sandwich-g5ecebea45_640.jpg" alt="">
                <p>超辣春卷</p>
                <div class="money" id="moneySix"></div>
                <div class="people" id="peopleSix"></div>
            </div>
        </div>
    </main>

    <!-- 底部导航栏 -->
    <footer>
        <a class="nav">
            <i class="fa-solid fa-house"></i>
            <span>主页</span>
        </a>
        <a class="nav" href="./store.html">
            <i class="fa-solid fa-store"></i>
            <span>店铺</span>
        </a>
        <a class="nav">
            <i class="fa-solid fa-file-lines"></i>
            <span>订单</span>
        </a>
        <a class="nav">
            <i class="fa-solid fa-face-laugh"></i>
            <span>我的</span>
        </a>
    </footer>

    <!-- 防止内容被底部导航栏遮挡 -->
    <div class="pad"></div>


    <script>
        // 获取当前系统时间
        setInterval(() => {
            let hours = new Date().getHours();
            let minutes = new Date().getMinutes();
            // 判断分钟数是否需要补零
            if (minutes < 10) {
                minutes = `0${minutes}`
            };
            // 写入时间
            document.querySelector("#time").innerHTML = `${hours}:${minutes}`;
        }, 1000);


        // 随机获取两位随机数
        document.querySelector("#moneyOne").innerHTML = `￥${Math.floor(Math.random() * 100)}`;
        document.querySelector("#moneyTwo").innerHTML = `￥${Math.floor(Math.random() * 100)}`;
        document.querySelector("#moneyThree").innerHTML = `￥${Math.floor(Math.random() * 100)}`;
        document.querySelector("#moneyFour").innerHTML = `￥${Math.floor(Math.random() * 100)}`;
        document.querySelector("#moneyFive").innerHTML = `￥${Math.floor(Math.random() * 100)}`;
        document.querySelector("#moneySix").innerHTML = `￥${Math.floor(Math.random() * 100)}`;


        // 随机获取三位随机数
        document.querySelector("#peopleOne").innerHTML = `${Math.floor(Math.random() * 1000)}已买`;
        document.querySelector("#peopleTwo").innerHTML = `${Math.floor(Math.random() * 1000)}已买`;
        document.querySelector("#peopleThree").innerHTML = `${Math.floor(Math.random() * 1000)}已买`;
        document.querySelector("#peopleFour").innerHTML = `${Math.floor(Math.random() * 1000)}已买`;
        document.querySelector("#peopleFive").innerHTML = `${Math.floor(Math.random() * 1000)}已买`;
        document.querySelector("#peopleSix").innerHTML = `${Math.floor(Math.random() * 1000)}已买`;
    </script>
</body>

</html>